<template>
  <div class="fiexd">
    <!-- 实用心理课,咨询专业课 -->
    <div class="topbox">
      <van-icon name="arrow-left" />
      <van-tabs
        @click="handle"
        v-model="active"
        class="topbox"
        color="#53C2F7"
        line-width="30px"
        line-height="5px"
      >
        <van-tab title="实用心理课">
          <div class="tabbox">
            <!-- 轮播图我 -->
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item>
                <img
                  :src="require('../assets/img/class-image/lunbo.png')"
                  alt=""
                />
              </van-swipe-item>
              <van-swipe-item>
                <img
                  :src="require('../assets/img/class-image/lunbo.png')"
                  alt=""
              /></van-swipe-item>
              <van-swipe-item>
                <img
                  :src="require('../assets/img/class-image/lunbo.png')"
                  alt=""
              /></van-swipe-item>
              <van-swipe-item>
                <img
                  :src="require('../assets/img/class-image/lunbo.png')"
                  alt=""
              /></van-swipe-item>
            </van-swipe>
            <!-- 课程分类选项 -->
            <div class="classenjoy">
              <ul>
                <li>
                  <img
                    :src="
                      require('../assets/img/class-image/矢量智能对象@2x(3).png')
                    "
                    alt=""
                  />
                  <p>课程分类</p>
                </li>
                <li>
                  <img
                    :src="require('../assets/img/class-image/免@2x.png')"
                    alt=""
                  />
                  <p>低价体验</p>
                </li>
                <li>
                  <img
                    :src="
                      require('../assets/img/class-image/矢量智能对象@2x(4).png')
                    "
                    alt=""
                  />
                  <p>名师讲堂</p>
                </li>
                <li>
                  <img
                    :src="require('../assets/img/class-image/¥@2x.png')"
                    alt=""
                  />
                  <p>特价优惠</p>
                </li>
                <li>
                  <img
                    :src="
                      require('../assets/img/class-image/矢量智能对象@2x(5).png')
                    "
                    alt=""
                  />
                  <p>好课试听</p>
                </li>
              </ul>
            </div>

            <!-- 大家再看 -->
            <div class="everyone">
              <div class="look">大家再看</div>
              <ul class="everyone-ul">
                <li>为你推荐</li>
                <li>|</li>
                <li>恋爱</li>
                <li>|</li>
                <li>提高情商</li>
                <li>|</li>
                <li>助眠</li>
                <li>|</li>
                <li>减压</li>
              </ul>
            </div>

            <!-- 新课推荐 -->
            <div class="newclass">
              <van-sidebar v-model="activeKey">
                <van-sidebar-item title="新课推荐" />
                <span>全部<van-icon name="arrow" /></span>
              </van-sidebar>
            </div>

            <!-- 新课推荐下面的内容 -->
            <div class="foryou">
              <van-tabs v-model="active" title-active-color="black">
                <hr />
                <van-tab title="为你推荐">
                  <div
                    class="foryou-box"
                    v-for="item in newlist.value"
                    :key="item"
                  >
                    <div class="img">
                      <img :src="item.img" alt="" />
                    </div>
                    <div class="title">
                      <h3>{{ item.tip }}</h3>
                      <span class="span">{{ item.title }}</span
                      >·<span class="span">{{ item.personal }}</span>
                      <br />
                      <span class="spans">{{ item.items }}</span
                      ><span class="spans">&nbsp;|&nbsp;</span
                      ><span class="spans">{{ item.evaluate }}人已学</span>
                    </div>
                  </div>
                  <button @click="more">查看更多课程</button>
                </van-tab>
                <van-tab title="恋爱情感">内容 2</van-tab>
                <van-tab title="情绪压力">内容 3</van-tab>
                <van-tab title="亲子教育">内容 4</van-tab>
                <van-tab title="泛心理">内容 4</van-tab>
                <van-tab title="职业规划">内容 4</van-tab>
              </van-tabs>
            </div>
            <!-- 为你推荐下面的广告图 -->
            <div class="advertisig">
              <img
                :src="require('../assets/img/class-image/图层 10@2x.png')"
                alt=""
              />
            </div>
            <!-- 好课试听 -->
            <div class="newclass">
              <van-sidebar v-model="activeKey">
                <van-sidebar-item title="好课试听" />
                <span>更多<van-icon name="replay" /></span>
              </van-sidebar>
            </div>
            <!-- 好课试听下面的内容 -->
            <div class="ul">
              <ul>
                <!-- v-for="item in detaillist" :key="item" -->
                <li v-for="item in detaillist" :key="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                    <p>{{ item.tip }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 特价优惠 -->
            <div class="newclass">
              <van-sidebar v-model="activeKey">
                <van-sidebar-item title="特价优惠" />
                <span>更多<van-icon name="arrow" /></span>
              </van-sidebar>
            </div>
            <!-- 特价优惠下面的内容 -->
            <div class="discount">
              <ul>
                <li v-for="item in detaillist" :key="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                    <p>{{ item.tip }}</p>
                    <span class="span"
                      >{{ item.title }}<i>·</i>{{ item.personal }}</span
                    >
                    <br />
                    <span>{{ item.price }}<i>壹贝</i></span>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 名师讲堂 -->
            <div class="newclass">
              <van-sidebar v-model="activeKey">
                <van-sidebar-item title="名师讲堂" />
                <span>更多<van-icon name="arrow" /></span>
              </van-sidebar>
            </div>
            <!-- 名师讲堂下面的内容 -->
            <div class="class" v-for="item in newlists.value" :key="item">
              <div class="img">
                <img :src="item.img" alt="" />
              </div>
              <div class="title">
                <h3>{{ item.tip }}</h3>
                <span class="span">{{ item.title }}</span
                >·<span class="span">{{ item.personal }}</span>
                <br />
                <span class="spans">{{ item.evaluate }}</span
                ><span class="spans">&nbsp;|&nbsp;</span
                ><span class="spans">{{ item.items }}人已咨询</span>
              </div>
            </div>
            <button @click="mores" class="btn">更多</button>
            <!-- 专题课程 -->
            <div class="newclass">
              <van-sidebar v-model="activeKey">
                <van-sidebar-item title="专题课程" />
              </van-sidebar>
            </div>
            <!-- 专题课程下面的内容 -->
            <div class="spacial">
              <ul class="ul">
                <li v-for="item in detaillist" :key="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="ulli">
                    <p>
                      {{ item.tip }}
                    </p>
                    <p>
                      {{ item.tip }}
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="咨询专业课">咨询专业课</van-tab>
      </van-tabs>
    </div>
    <!-- 搜索、我的课程 -->
    <div class="icon">
      <div class="icon-ellipsis">
        <van-icon name="search" />
        <span>搜索</span>
      </div>
      <div class="icon-service">
        <van-icon name="send-gift-o" />
        <span>我的课程</span>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <img :src="require('../assets/img/class-image/组 8@2x(4).png')" alt="" />
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { computed, onMounted, reactive } from "vue";
export default {
  setup() {
    const router = useRouter();
    const active = 2;
    const activeKey = "";
    const store = useStore();
    const detaildata = () => store.dispatch("detaildata");
    const detaillist = reactive(computed(() => store.state.Detail.detaillist));
    let newlist = reactive([]); //新数组
    let newlists = reactive([]); //新数组
    const more = () => {
      newlist.value = detaillist.value;
    };
    const mores = () => {
      newlists.value = detaillist.value;
    };
    onMounted(() => {
      detaildata();
      setTimeout(() => {
        newlist.value = detaillist.value.slice(0, 5);
        newlists.value = detaillist.value.slice(0, 3);
      }, 500);
    });

    // 跳转回首页事件
    const handle = () => {
      router.push("/home/index");
    };

    return {
      mores,
      more,
      newlist,
      handle,
      router,
      store,
      detaillist,
      detaildata,
      active,
      activeKey,
      newlists,
    };
  },
};
</script>
<style lang="less" scoped>
.topbox .van-tabs {
  width: 50%;
  float: left;
}
.icon {
  width: 40%;
  display: flex;
  flex-direction: row-reverse;
  span {
    font-size: 10px;
  }
}
.icon-service,
.icon-ellipsis {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  text-align: center;
}
.icon-ellipsis {
  margin-left: 15px;
  margin-right: 10px;
}
.van-button {
  border: none;
}
.van-icon-arrow-left {
  float: left;
  margin-top: 10px;
}
// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  margin-top: 15px;
  line-height: 150px;
  text-align: center;
}
.tabbox {
  margin: 0 auto;
  width: 330px;
  // height: 3000px;
}
.my-swipe {
  height: 200px;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
// 课程分类选项
.classenjoy ul {
  margin-top: 15px;
  display: flex;
  align-items: center;
  width: 100%;
  li {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      padding-top: 10px;
      width: 40px;
      height: 40px;
    }
    p {
      font-size: 15px;
      line-height: 0px;
      color: #0e0e0e;
    }
  }
}
//大家再看
.everyone {
  display: flex;
  margin-top: 15px;
  width: 100%;
  height: 50px;
  background: #eee;
  border-radius: 10px;
  .look {
    width: 20%;
    font-size: 10px;
    line-height: 50px;
    height: 50px;
    text-align: center;
  }
  .everyone-ul {
    width: 80%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    li {
      font-size: 8px;
      line-height: 50px;
    }
  }
}

// 新课推荐
.newclass {
  margin-top: 15px;
  width: 100%;
  height: 50px;
  position: relative;
  font-size: 15px;

  span {
    float: right;
    position: absolute;
    right: 0;
    top: 10px;
    width: 70px;
    height: 25px;
    line-height: 28px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    text-align: center;
  }
  .van-sidebar {
    width: 40%;
    .van-sidebar-item {
      font-size: 25px;
    }
  }
}
// 为你推荐
.foryou {
  width: 330px;
  .van-tabs {
    width: 100%;
    /deep/.van-tabs__line {
      height: 0px;
    }
  }
  .foryou-box {
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 120px;
    // float: left;
    .img {
      width: 35%;
      height: 120px;
      float: right;
      border-radius: 5px;
      img {
        border-radius: 10px;
        width: 100px;
        height: 100px;
        margin-top: 10px;
      }
    }
    .title {
      width: 70%;
      height: 120px;

      // margin-bottom: 20px;
      h3 {
        margin: 0;
        font-size: 16px;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        font-weight: 600;
      }
      .span {
        font-size: 13px;
      }
      .spans {
        font-size: 13px;
        color: #bbb;
      }
    }
  }
  button {
    width: 300px;
    height: 50px;
    background: #ccc;
    border: none;
    text-align: center;
    font-size: 20px;
    color: slategrey;
    margin: 15px 0 15px 10px;
  }
}
// 为你推荐下面的广告图
.advertisig {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  clear: both;
  img {
    width: 100%;
    height: 100%;
  }
}
// 好课试听下的内容
.ul {
  margin-top: 10px;
  width: 100%;
  height: 180px;
  overflow: auto;

  ul {
    display: flex;
    height: 100%;
    li {
      flex-shrink: 0;
      background: #eee;
      border-radius: 10px;
      width: 100px;
      height: 100%;
      overflow: hidden;
      margin-right: 10px;
      .img {
        width: 100%;
        height: 110px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        margin: 0 5px 5px 5px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
// 特价优惠下面的内容
.discount {
  width: 100%;
  height: 230px;
  margin-top: 10px;
  overflow: auto;

  ul {
    height: 100%;
    display: flex;

    li {
      flex-shrink: 0;
      width: 150px;
      height: 100%;
      margin-right: 15px;

      float: left;
      border-radius: 10px;
      .img {
        width: 100%;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        margin: 0;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .span {
        display: inline-block;
        width: 100%;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #bbb;
      }
      span {
        font-size: 20px;
        color: red;
        font-weight: 600;
        float: right;
        margin-right: 10px;
      }
      i {
        font-size: 13px;
      }
    }
  }
}
// 名师讲堂下面的内容
.class {
  width: 100%;
  height: 180px;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;

  img {
    margin-top: 10px;
    width: 40%;
    height: 100%;
    float: left;
    border-radius: 10px;
  }
  .title {
    width: 60%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .span {
      font-size: 14px;
    }
    .spans {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: #bbb;
    }
  }
}
.btn {
  width: 100%;
  height: 50px;
  background: #ccc;
  border: none;
  text-align: center;
  font-size: 20px;
  color: #0e0e0e;
}
// 专题课程下面de内容
.spacial {
  width: 100%;
  height: 250px;
  margin-top: 10px;
  overflow: auto;
  .ul {
    display: flex;
    height: 100%;
    margin: 0;
    li {
      flex-shrink: 0;
      width: 150px;
      height: 100%;
      background: #eee;
      float: left;
      margin-right: 20px;
      img {
        width: 150px;
        height: 150px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .ulli {
        margin: 0;
        width: 90%;
        // height: 40%;
        // padding: 10px;

        p {
          margin: 0;
          font-size: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
// 底部
.footer {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
